<template>
  <div>
    <s-breadcrumb></s-breadcrumb>
    <el-card>
      <!-- 搜索区 -->
      <el-form  ref="refresh_ref" :model="query_info" :rules="refresh_rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="用户昵称" prop="nick_name">
              <el-input placeholder="请输入用户昵称" maxlength="30" clearable show-word-limit v-model="query_info.nick_name"  @clear="get_list()"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="是否显示" prop="status">
              <el-select v-model="query_info.status" placeholder="请选择是否显示" clearable @clear="get_list()">
                <el-option label="否" value="0"></el-option>
                <el-option label="是" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="星级" prop="level">
              <el-select v-model="query_info.level" placeholder="请选择星级" clearable @clear="get_list()">
                <el-option label="非常差" value="1"></el-option>
                <el-option label="差" value="2"></el-option>
                <el-option label="一般" value="3"></el-option>
                <el-option label="好" value="4"></el-option>
                <el-option label="非常好" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="评论时间" prop="created_at">
              <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="query_info.created_at" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" clearable>
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="20" class="s_row">
        <el-col :span="2">
          <el-button type="primary" @click="get_list()">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click="refresh()">重置</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="info" @click="$router.go(-1)">返回</el-button>
        </el-col>
      </el-row>
      <!-- 表格区 -->
      <el-table :data="list" border>
        <el-table-column align="center" label="编号" prop="id" width="80" fixed="left" sortable></el-table-column>
        <el-table-column align="center" label="昵称" prop="user_to.nick_name" width="200"></el-table-column>
        <el-table-column align="center" label="星级" prop="level_name" width="200"></el-table-column>
        <el-table-column align="center" label="是否显示" prop="status" width="150">
          <template slot-scope="scope">
            <el-tooltip effect="dark" :content="scope.row.status?'是':'否'" placement="top" :enterable="false">
              <el-switch :disabled="status_btn" v-model="scope.row.status" active-color="#5FB878" inactive-color="#d2d2d2" @change="set_status(scope.row)"></el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="图片" align="center" prop="image_url" width="200">
          <template slot-scope="scope">
            <el-image class="list_image" :src="scope.row.images[0]" :preview-src-list="scope.row.images">
              <div slot="error" class="image-error">暂无图片</div>
            </el-image>
          </template>
        </el-table-column>

        <el-table-column align="center" label="评论时间" prop="created_at" width="200" sortable></el-table-column>
      </el-table>
      <!-- 页码区 -->
      <el-pagination @size-change="handle_size_change" @current-change="handle_current_change" :total="total" :layout="layout" :current-page="query_info.page" :page-sizes="page_sizes" :page-size="query_info.pagesize"></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      status_btn: this.is_string('shop/product/evaluate_status'), // 状态按钮是否禁用
      page_sizes: this.$config.page_sizes, // 分页条数列表
      layout: this.$config.layout, // 表格分页组件配置
      query_info: {
        id: this.$route.query.id,
        nick_name: '', // 用户昵称
        status: '', // 是否显示:0=否,1=是
        level: '', // 星级：1=非常差，2=差，3=一般，4=好，5=非常好
        created_at: [], // 添加时间
        page: this.$config.page, // 当前页码
        pagesize: this.$config.pagesize// 每页显示条数
      },
      list: [], // 列表数据
      total: 0, // 总数据条数
      refresh_rules: { nick_name: [], status: [], level: [], created_at: [] }
    }
  },
  created () {
    this.get_list()
  },
  methods: {
    // 获取列表
    get_list () {
      this.$base.request({
        that: this,
        url: 'shop/product/evaluate_list',
        data: this.query_info
      }, (res) => {
        if (res.code === 8888) {
          this.list = res.data.list
          this.total = res.data.total
        }
      })
    },
    // 刷新
    refresh () {
      this.$refs.refresh_ref.resetFields()
      this.get_list()
    },
    // 当前每页多少条选择
    handle_size_change (pagesize) {
      this.query_info.pagesize = pagesize
      this.get_list()
    },
    // 当前页码
    handle_current_change (page) {
      this.query_info.page = page
      this.get_list()
    },
    // 状态调整
    set_status (info) {
      this.$base.request({
        that: this,
        method: 'PUT',
        url: 'shop/product/evaluate_status',
        data: { id: info.id, status: info.status ? 1 : 0 }
      }, (res) => {
        if (res.code === 8888) {
          this.$base.message({ that: this, message: res.msg })
        } else {
          info.status = !info.status
        }
      })
    }
  }
}
</script>
